@import '~@/assets/css/mixins';

.blood_map {
  // height: 900px;
  // border-left: 1px solid rgb(0 0 0 / 10%);
  overflow: hidden;
  width: 100%;

  :global {
    .g6-minimap-container {
      border: 1px solid #e2e2e2;
    }
    .g6-minimap-viewport {
      border: 2px solid rgb(25, 128, 255);
    }
    .ant-spin-nested-loading {
      height: 100%;
    }

    .ant-spin-container {
      height: 100%;
    }

    .node {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    .node i {
      flex-shrink: 0;
      margin-left: 4Px;
    }

    .node .label {
      display: inline-block;
      flex-shrink: 0;
      margin-left: 8Px;
      font-size: 14Px;
      font-weight: 400;
    }

    .iconBackground {
      width: 24Px;
      height: 24Px;
      margin-left: 9Px;
      line-height: 24Px;
      margin-right: 2px;
    }

    .level {
      width: 100%;
      height: 36Px;
      line-height: 36Px;
      border-radius: 2Px;

      .level-label {
        font-size: 14Px;
        font-weight: 400;
        color: #FFF;
        margin-left: 16Px;
      }
    }

    .content {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 40Px;
      align-items: center;
      cursor: pointer;

      .content-label {
        color: rgb(0 0 0 / 85%);
      }
    }

    .default {
      flex-shrink: 0;
      background: rgb(255 255 255 / 39%);
      border: 2Px solid #0084FF;
      border-radius: 4Px;

      .level {
        background: linear-gradient(94deg, #0084FF 0%, #50A9FD 100%);
      }

      .iconBackground {
        color: #0084FF;
      }
    }

    .self {
      flex-shrink: 0;
      background: rgb(255 255 255 / 39%);
      border: 2Px solid #FFA000;
      border-radius: 4Px;

      .level {
        background: linear-gradient(94deg, #FFA000 0%, #FFC460 100%);
      }

      .iconBackground {
        color: #FFA000;
      }
    }
  }
}
